<h1>Carte des bornes Vélibs</h1> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
    var map;
    var locVelib = null
    var infowindowPrec = null

    $(function(){
        $("#carte").height($(window).height()*0.8);
        initialize();
    });
    var marker;
    
    function initialize() {
        //objet contenant des propriétés avec des identificateurs prédéfinis dans Google Maps permettant
        //de définir des options d'affichage de notre carte
        var options = {
            center: new google.maps.LatLng(48.858565, 2.347198),
            zoom: 18,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        
        if (navigator.geolocation)
            var watchId = navigator.geolocation.watchPosition(successCallback, null, {enableHighAccuracy:true});
        else
            alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");
        
        update_getInfosStations();

        map = new google.maps.Map(document.getElementById("carte"), options);
        
        setTimeout(update_getInfosStations, 10000);
    }
    
    function successCallback(position){
        map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 
            map: map
        }); 
    }
    
    function update_getInfosStations(){
        $.getJSON('app/ajax/ajax_getInfosStations.php', function(data) {
            var myMarkerImage = null;
            $.each(data, function(i, item) {  
                myMarkerImage=myMarkerImage=new google.maps.MarkerImage('assets/images/picto_normal_medium.gif');
                var myWindowOptions = {
                    content:'Adresse :<br/>'+item.StationAddress+'<br/>Nb vélos disponible : '+item.AvailableBikes+'<br/>Nb places libre : '+item.AvailableBikeStands+'<br/>Dernière mise à jour : '+ item.LastUpdate
                } 
                var infowindow = new google.maps.InfoWindow(myWindowOptions);
                if(item.Bonus){
                    myMarkerImage=new google.maps.MarkerImage('assets/images/picto_start_medium2.gif');
                }
                    var markerVelo = new google.maps.Marker({
                    position: new google.maps.LatLng(item.StationLatitude, item.StationLongitude),
                    map: map,
                    title: item.StationAddress,
                    icon: myMarkerImage
                });
                google.maps.event.addListener(markerVelo, 'click', function() {
                    if(infowindowPrec!=null)
                            infowindowPrec.close();
                    infowindow.open(map,markerVelo);
                    infowindowPrec=infowindow;
                });
            });

        });
    }
</script>
<div id="carte" style="width:100%; height:700px"></div>